<template>
  <el-container id="votedetaildiv">
    <el-form :model="form" ref="form" class="mu-demo-form" v-show="nowgroup===1" label-position="left" :rules="dRules" hide-required-asterisk>
      <h1>领导班子年度满意度测评</h1>
      <div class="groupdept">
        <el-form-item prop="dtopic1" label="1. 政治思想建设方面">
          <div style="line-height:150%;font-weight:lighter;width:100%;clear:both">（以党的政治建设统领机关党建和业务工作，贯彻落实党中央决策部署和习近平总书记重要指示批示精神的情况）</div>
          {{ticketval2text(ticketdata.dtopic1,0)}}
        </el-form-item>
        <el-form-item prop="dtopic2" label="2. 领导能力和工作能力方面">
          <div style="line-height:150%;font-weight:lighter;width:100%;clear:both">（落实部党组工作要求，发现和解决落实“两统一”核心职责、推动自然资源管理工作的情况）</div>
          {{ticketval2text(ticketdata.dtopic2,0)}}
        </el-form-item>
        <el-form-item prop="dtopic3" label="3. 担当作为、履职尽责方面">
          <div style="line-height:150%;font-weight:lighter;width:100%;clear:both">（结合自身实际，创造性开展工作的情况和成效）</div>
          {{ticketval2text(ticketdata.dtopic3,0)}}
        </el-form-item>
        <el-form-item prop="dtopic4" label="4. 落实中央八项规定精神，反对“四风”，特别是集中整治形式主义、官僚主义问题">
          <div style="line-height:150%;font-weight:lighter;width:100%;clear:both">（遵守中央八项规定及其实施细则精神，贯彻党中央关于开展“基层减负年”各项要求，坚决反对“四风”特别是形式主义、官僚主义的情况）</div>
          {{ticketval2text(ticketdata.dtopic4,0)}}
        </el-form-item>
        <el-form-item prop="dtopic5" label="5. 作风建设方面">
          <div style="line-height:150%;font-weight:lighter;width:100%;clear:both">（严格落实管党治党政治责任，持之以恒正风肃纪，深化部党组巡视问题整改，严格执纪精准问责，深入推进反腐败斗争的情况）</div>
          {{ticketval2text(ticketdata.dtopic5,0)}}
        </el-form-item>
        <el-form-item>
          <!-- <el-button type="primary" @click="prevscreen"  class="nextbtn" disabled>上一页</el-button> -->
          <el-button v-show="leaders&&leaders.length>0" type="primary" @click="nextscreen0"  class="nextbtn">下一页</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-form :model="form2" ref="form2" class="mu-demo-form" label-width="100%" v-show="nowgroup>1&&showform" label-position="top" :rules="Rules2">
      <div v-for="(item,index) in leaders" :key="index" v-show="nowgroup===index+2">
        <div class="groupdept" v-if='ticketdata.topic1'>
          <h1>局级干部年度考核测评 被投票人{{nowgroup-1}} <font v-if="leaders[nowgroup-2]">姓名：{{leaders[nowgroup-2].inname}} 编号：{{leaders[nowgroup-2].code}}</font></h1>
          <h3><span class="color1">德</span>政治品质</h3>
          <el-form-item prop="topic1" label="" :error="etext1">
            {{ticketval2text(ticketdata.topic1[nowgroup-2],1)}}
          </el-form-item>
          <h3><span class="color1">德</span>道德品行</h3>
          <el-form-item prop="topic2" label="" :error="etext2">
            {{ticketval2text(ticketdata.topic2[nowgroup-2],1)}}
          </el-form-item>
          <h3><span class="color2">能</span>政治能力</h3>
          <el-form-item prop="topic3" label="" :error="etext3">
            {{ticketval2text(ticketdata.topic3[nowgroup-2],1)}}
          </el-form-item>
          <h3><span class="color2">能</span>专业素养</h3>
          <el-form-item prop="topic4" label="" :error="etext4">
            {{ticketval2text(ticketdata.topic4[nowgroup-2],1)}}
          </el-form-item>
          <h3><span class="color2">能</span>组织领导</h3>
          <el-form-item prop="topic5" label="" :error="etext5">
            {{ticketval2text(ticketdata.topic5[nowgroup-2],1)}}
          </el-form-item>
          <h3><span class="color3">勤</span>精神状态</h3>
          <el-form-item prop="topic6" label="" :error="etext6">
            {{ticketval2text(ticketdata.topic6[nowgroup-2],1)}}
          </el-form-item>
          <h3><span class="color3">勤</span>工作作风</h3>
          <el-form-item prop="topic7" label="" :error="etext7">
            {{ticketval2text(ticketdata.topic7[nowgroup-2],1)}}
          </el-form-item>
          <h3><span class="color4">绩</span>履职情况</h3>
          <el-form-item prop="topic8" label="" :error="etext8">
            {{ticketval2text(ticketdata.topic8[nowgroup-2],1)}}
          </el-form-item>
          <h3><span class="color4">绩</span>工作成效</h3>
          <el-form-item prop="topic9" label="" :error="etext9">
            {{ticketval2text(ticketdata.topic9[nowgroup-2],1)}}
          </el-form-item>
          <h3><span class="color5">廉</span>一岗双责</h3>
          <el-form-item prop="topic10" label="" :error="etext10">
            {{ticketval2text(ticketdata.topic10[nowgroup-2],1)}}
          </el-form-item>
          <h3><span class="color5">廉</span>廉洁自律</h3>
          <el-form-item prop="topic11" label="" :error="etext11">
            {{ticketval2text(ticketdata.topic11[nowgroup-2],1)}}
          </el-form-item>
          <h3><span class="color6">总</span>总体评价</h3>
          <el-form-item prop="topic12" label="" :error="etext12">
            {{ticketval2text(ticketdata.topic12[nowgroup-2],2)}}
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="prevscreen"  class="nextbtn">上一页</el-button>
            <el-button v-show="nextbtnshow" type="primary" @click="nextscreen"  class="nextbtn">下一页</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </el-container>
</template>
<script>
export default {
  props: {
    leaders: {},
    myid: '',
    ticketid: ''
  },
  watch: {
    ticketid: function () {
      let _this = this
      this.$http.get(`/api/ticket/details/` + this.ticketid).then(function (response) {
        _this.ticketdata = response.data
      })
      this.nowgroup = 1
    },
    'form2.topic1': function () {
      this.etext1 = ''
      if (this.form2.topic1[this.nowgroup - 2]) {
        this.etext1 = ''
      } else {
        this.etext1 = '必填'
      }
    },
    'form2.topic2': function () {
      this.etext2 = ''
      if (this.form2.topic2[this.nowgroup - 2]) {
        this.etext2 = ''
      } else {
        this.etext2 = '必填'
      }
    },
    'form2.topic3': function () {
      this.etext3 = ''
      if (this.form2.topic3[this.nowgroup - 2]) {
        this.etext3 = ''
      } else {
        this.etext3 = '必填'
      }
    },
    'form2.topic4': function () {
      this.etext4 = ''
      if (this.form2.topic4[this.nowgroup - 2]) {
        this.etext4 = ''
      } else {
        this.etext4 = '必填'
      }
    },
    'form2.topic5': function () {
      this.etext5 = ''
      if (this.form2.topic5[this.nowgroup - 2]) {
        this.etext5 = ''
      } else {
        this.etext5 = '必填'
      }
    },
    'form2.topic6': function () {
      this.etext6 = ''
      if (this.form2.topic6[this.nowgroup - 2]) {
        this.etext6 = ''
      } else {
        this.etext6 = '必填'
      }
    },
    'form2.topic7': function () {
      this.etext7 = ''
      if (this.form2.topic7[this.nowgroup - 2]) {
        this.etext7 = ''
      } else {
        this.etext7 = '必填'
      }
    },
    'form2.topic8': function () {
      this.etext8 = ''
      if (this.form2.topic8[this.nowgroup - 2]) {
        this.etext8 = ''
      } else {
        this.etext8 = '必填'
      }
    },
    'form2.topic9': function () {
      this.etext9 = ''
      if (this.form2.topic9[this.nowgroup - 2]) {
        this.etext9 = ''
      } else {
        this.etext9 = '必填'
      }
    },
    'form2.topic10': function () {
      this.etext10 = ''
      if (this.form2.topic10[this.nowgroup - 2]) {
        this.etext10 = ''
      } else {
        this.etext10 = '必填'
      }
    },
    'form2.topic11': function () {
      this.etext11 = ''
      if (this.form2.topic11[this.nowgroup - 2]) {
        this.etext11 = ''
      } else {
        this.etext11 = '必填'
      }
    },
    'form2.topic12': function () {
      this.etext12 = ''
      if (this.form2.topic12[this.nowgroup - 2]) {
        this.etext12 = ''
      } else {
        this.etext12 = '必填'
      }
    }
  },
  data () {
    return {
      ticketdata: {},
      pagetitle: '',
      etext1: '',
      etext2: '',
      etext3: '',
      etext4: '',
      etext5: '',
      etext6: '',
      etext7: '',
      etext8: '',
      etext9: '',
      etext10: '',
      etext11: '',
      etext12: '',
      messagetext: '',
      showform: true,
      nextbtnshow: true,
      prevbtnshow: false,
      submitbtnshow: false,
      nowgroup: 1,
      dRules: {
        dtopic1: { required: true, message: '必填', trigger: 'change' },
        dtopic2: { required: true, message: '必填', trigger: 'change' },
        dtopic3: { required: true, message: '必填', trigger: 'change' },
        dtopic4: { required: true, message: '必填', trigger: 'change' },
        dtopic5: { required: true, message: '必填', trigger: 'change' }
      },
      Rules2: {
        topic1: { required: true, message: '必填', trigger: 'change' }
      },
      dtopic1: '',
      form: {
        dtopic1: '',
        dtopic2: '',
        dtopic3: '',
        dtopic4: '',
        dtopic5: ''
      },
      form2: {
        topic1: [],
        topic2: [],
        topic3: [],
        topic4: [],
        topic5: [],
        topic6: [],
        topic7: [],
        topic8: [],
        topic9: [],
        topic10: [],
        topic11: [],
        topic12: []
      },
      texticon: '',
      topBarFixed: false
    }
  },
  methods: {
    submitticket () {
      let j = 0
      for (let i = 1; i <= 12; i++) {
        if (this.form2['topic' + i][this.nowgroup - 2]) {
          this['etext' + i] = ''
        } else {
          this['etext' + i] = '必填'
          j++
        }
      }
      if (j === 0) {
        var _this = this
        let leadercode = []
        this.leaders.forEach(element => {
          leadercode.push(element.code)
        })
        console.log('leadercode:' + leadercode)
        // var personParams = { Page: 0, Pagenum: 20, Personname: '', Unitkey: '', Sortkey: '', Isace: true, timestamp: new Date().getTime() }
        let para = {
          persons: leadercode,
          dtopic1: this.form.dtopic1,
          dtopic2: this.form.dtopic2,
          dtopic3: this.form.dtopic3,
          dtopic4: this.form.dtopic4,
          dtopic5: this.form.dtopic5,
          topic1: this.form2.topic1,
          topic2: this.form2.topic2,
          topic3: this.form2.topic3,
          topic4: this.form2.topic4,
          topic5: this.form2.topic5,
          topic6: this.form2.topic6,
          topic7: this.form2.topic7,
          topic8: this.form2.topic8,
          topic9: this.form2.topic9,
          topic10: this.form2.topic10,
          topic11: this.form2.topic11,
          topic12: this.form2.topic12
        }
        this.$http
          .post(`/api/ticket/add/` + this.myid, para)
          .then(function (response) {
            if (response.data.success === true) {
              _this.$emit('refreshevent')
              _this.$message({
                message: '成功投票' + response.data.message,
                type: 'success'
              })
              this.$refs['form'].resetFields()
              this.$refs['form2'].resetFields()
              this.nowgroup = 1
              _this.$emit('refreshevent')
            } else {
              _this.$message({
                message: '投票失败：' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(function (error) {
            _this.showform = false
            _this.messagetext = '投票失败：' + error
          })
      } else {
        this.$message({
          message: '请全部填写完整',
          type: 'error'
        })
        // this.$toast.error('请全部填写完整')
      }
    },
    nextscreen0 () {
      if (this.leaders) {
        if (this.nowgroup <= this.leaders.length) {
          this.nowgroup++
          this.btnshow()
        }
      }
    },
    nextscreen () {
      if (this.leaders) {
        if (this.nowgroup <= this.leaders.length) {
          this.nowgroup++
          this.btnshow()
        }
      }
    },
    prevscreen () {
      if (this.leaders) {
        if (this.nowgroup > 1) {
          this.nowgroup--
          this.btnshow()
        }
      }
    },
    btnshow () {
      if (this.nowgroup === 1) {
        this.prevbtnshow = false
      } else {
        this.prevbtnshow = true
      }
      if (this.nowgroup > this.leaders.length) {
        this.nextbtnshow = false
        this.submitbtnshow = true
      } else {
        this.nextbtnshow = true
        this.submitbtnshow = false
      }
    },
    ticketval2text (val, type) {
      if (type === 0) {
        if (val === 'A') {
          return '优秀'
        }
        if (val === 'B') {
          return '良好'
        }
        if (val === 'C') {
          return '一般'
        }
        if (val === 'D') {
          return '较差'
        }
      }
      if (type === 1) {
        if (val === 'A') {
          return '好'
        }
        if (val === 'B') {
          return '较好'
        }
        if (val === 'C') {
          return '一般'
        }
        if (val === 'D') {
          return '差'
        }
      }
      if (type === 2) {
        if (val === 'a') {
          return '优秀'
        }
        if (val === 'b') {
          return '称职（合格）'
        }
        if (val === 'c') {
          return '基本称职（基本合格）'
        }
        if (val === 'd') {
          return '不称职（不合格）'
        }
      }
    },
    ticketdetail () {
      console.log('detailticketid:' + this.ticketid)
      let _this = this
      this.$http.get(`/api/ticket/details/` + this.ticketid).then(function (response) {
        _this.ticketdata = response.data
      })
      this.nowgroup = 1
    }
  },
  mounted () {
    this.ticketdetail()
    this.nowgroup = 1
  }
}
</script>
<style>
#assessdetail .el-dialog__body{
  padding-top:10px !important;
}
.mu-demo-form {
  width: 100%;
  font-family: 'Microsoft YaHei','黑体';
}
.mu-demo-form h1{
  text-align: center;
  margin: 0;
  padding: 0;
}
#votedetaildiv .el-form-item__label{
  color:#000;
}
#votedetaildiv .el-radio__label{
  color:#000;
}
#votedetaildiv .el-form-item__content{
  font-weight: bolder;
}
.mu-demo-form h2{
  margin: 0;
  padding: 0;
  text-align: center;
}
#votedetaildiv .mu-demo-form h3{
  text-align: left;
  padding:10px 20px 0 0;
  font-weight: normal;
  margin: 0;
  float:left;
}
#votedetaildiv .mu-demo-form h3 span{
  padding:3px 8px 5px;
  margin:0 10px 0 0;
  color:#fff;
  border-radius:5px;
  font-weight: bolder;
}
.mu-demo-form h3 span.color1{
  background: #FFD118;
}
.mu-demo-form h3 span.color2{
  background: #99cc00;
}
.mu-demo-form h3 span.color3{
  background: #cc9900;
}
.mu-demo-form h3 span.color4{
  background: #c00;
}
.mu-demo-form h3 span.color5{
  background: #f90;
}
.mu-demo-form h3 span.color6{
  background: #06c;
}
.groupdept{
  margin:0.2rem 0.2rem 0;
  padding:0.5rem;
}
.submittext{
  font-size: 0.6rem;
  color: #fff;
  font-family: 'Microsoft YaHei','黑体';
  text-align: center;
}
#iconok{
  width:5rem;
  height: 5rem;
  background:url(../assets/icon_submit.png) no-repeat;
  background-size:contain;
  background-position:center bottom;
  margin:1rem auto 0;
  z-index: 9999;
}
#iconerror{
  width:5rem;
  height: 5rem;
  background:url(../assets/icon_error.png) no-repeat;
  background-size:contain;
  background-position:center bottom;
  margin:1rem auto 0;
  z-index: 9999;
}
</style>
